<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>clip练习</title>
	<style type="text/css">
		body {
			width:960px;
			margin: 0 auto;
			font-family: 微软雅黑;
			font-size: 18px;
			line-height: 1.8em;
		}
		h1 {
			color:green;
		}
		div {
			width: 300px;
		}
		div p {
			text-align: center;
		}
		.left {
			float:left;
		}
		.absolute {
			position: absolute;
			clip: rect(5px, 40px, 45px, 5px);
		}
	</style>
</head>
<body>
	<h1>clip属性演示</h1>
	<p>
		A clipping region defines what portion of an element's border box is visible.
	</p>
	<p>clip属性用来定义块元素的可见部分。并且clip属性只对绝对定位元素有效。</p>
	<div class="left">
		<p>原始图片</p>
		<img src="./images/reading-girl.jpg" alt="认真读书的女孩" width="300" />	
	</div>
	<div class="left">
		<p>clip: rect(5px, 40px, 45px, 5px)效果</p>
		<img class="absolute" src="./images/reading-girl.jpg" alt="认真读书的女孩" width="300" />	
	</div>
	<div class="left">
		<p>clip如何工作？</p>
		<p>
			<img src="./images/clip.png" alt="clip工作原理图" />	
		</p>
	</div>
</body>
</html>